<template>
	<view class="page n-s-b">
		<u-swiper :list="bannerList" mode="round" :border-radius="20" img-mode="aspectFill" height="375"></u-swiper>
		<!-- <view class="course">
			<view class="course-title fillx bsp10 t-bb-u">
				<u-section title="爱八方历程" sub-title="更多" :show-line="false"></u-section>
			</view>
			<view class="course-swiper fillx t-bb-u">
				<view class="course-scroll fillx frcc">
					<view class="course-item-wrap" v-for="(item,index) in courseBannerList" :key="index">
						<image class="course-item-img" :src="item.image" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="class">
			<view class="class-title fillx bsp10 t-bb-u">
				<u-section title="爱八方学堂" sub-title="更多" :show-line="false"></u-section>
			</view>
			<view class="class-swiper fillx t-bb-u">
				<view class="class-scroll fillx frcc">
					<view class="class-item-wrap" v-for="(item,index) in classBannerList" :key="index">
						<image class="class-item-img" :src="item.image" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="material">
			<view class="material-title fillx bsp10 t-bb-u">
				<u-section title="素材日历" sub-title="更多" :show-line="false"></u-section>
			</view>
			<view class="material-recommend">
				<view class="material-date fillx t-bb-u">
					<u-tabs 
					:list="dateList" 
					:is-scroll="false" 
					:current="current" 
					height="100" 
					font-size="28" 
					active-color="#e4475a" 
					lineHeight="40"
					:active-item-style="{'background-color':'#ec808d','color':'#ffffff'}"
					:bar-style="{'background-color':'#ffffff'}"
					:isNoWrap="false"
					:item-width="5"
					@change="change"
					@showTimePicker="showTimePicker"
					></u-tabs>
					<u-calendar 
					v-model="timePickerIsShow" 
					mode="date" 
					active-bg-color="#ec808d"
					btn-type="error"
					@change="changeCalendar"></u-calendar>
					<!-- <u-picker mode="time" v-model="timePickerIsShow" :params="timePickerParams" @confirm="confirmTime"></u-picker> -->
				</view>
				<view class="material-recommend-content fillx fcsc">
					<view class="recommend-item fillx t-bb-u" v-for="item in showRecommendList.recommendList" :key="item.id">
						<view class="recommend-item-title fillx frcc">
							<view class="recommend-item-title-content">
								{{item.title}}
							</view>
							<view class="recommend-item-create_time">
								{{item.create_time}}
							</view>
						</view>
						<view class="recommend-item-content fillx bsp10">
							<view class="recommend-item-text fillx">
								{{item.content}}
							</view>
							<image class="recommend-item-img" src="../../../static/test/test_01.jpg" mode="widthFix"></image>
						</view>
						<view class="recommend-item-btn fillx frcc">
							<view class="recommend-item-btn-save ha frcc" @click="toSave">
								存入相册
							</view>
							<view class="recommend-item-btn-forward ha frcc" @click="toForward">
								一键转发
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="800"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowWidth:0,
				windowHeight:0,
				bannerList:[
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101929410153485.jpg'}, 
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101922557539852.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101936149999754.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101797454574853.jpg'}
				],
				courseBannerList:[
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101929410153485.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101922557539852.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101936149999754.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101797454574853.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101929410153485.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101922557539852.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101936149999754.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101797454574853.jpg'}
				],
				classBannerList:[
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101929410153485.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101922557539852.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101936149999754.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101797454574853.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101929410153485.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101922557539852.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101936149999754.jpg'},
					{image: 'http://app.aibafang.com/attachment/images/2020/09/25/image_160101797454574853.jpg'}
				],
				current:1,
				dateList:[
					{name:'精选\r\n推荐'},
					{name:'星期六\r\n26日'},
					{name:'星期五\r\n25日'},
					{name:'星期四\r\n24日'},
					{name:'更多\r\n日期'},
				],
				timePickerParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timePickerIsShow:false,
				chooseTime:'2020-12-26',
				recommendList:[
					{date:'2020-12-26',recommendList:[
						{id:'abf_new_2020-12-26_01',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-26',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-26_02',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-26',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-26_03',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-26',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''}
					]},
					{date:'2020-12-25',recommendList:[
						{id:'abf_new_2020-12-25_01',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-25',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-25_02',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-25',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-25_03',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-25',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''}
					]},
					{date:'2020-12-24',recommendList:[
						{id:'abf_new_2020-12-24_01',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-24',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-24_02',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-24',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-24_03',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-24',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''}
					]},
					{date:'2020-12-23',recommendList:[
						{id:'abf_new_2020-12-23_01',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-23',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-23_02',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-23',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-23_03',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-23',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''}
					]},
					{date:'2020-12-22',recommendList:[
						{id:'abf_new_2020-12-22_01',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-22',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-22_02',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-22',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''},
						{id:'abf_new_2020-12-22_03',title:'【燃爆12月】斯达克发生的纠纷过时',create_time:'2020-12-22',content:'发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法\r\n发了啥地方就是浪费收法',picture:''}
					]}
				],
				scrollTop:0
			}
		},
		methods: {
			change(current){
				uni.showToast({
					title:'change',
					icon:'none'
				})
				this.current=current
				if(current===this.dateList.length-1){
					this.showTimePicker()
				}
			},
			changeCalendar(obj){
				this.chooseTime=obj.result
			},
			showTimePicker(){
				this.timePickerIsShow=true
			},
			confirmTime(obj){
				this.chooseTime=obj.year+'-'+obj.month+'-'+obj.day
			},
			toSave(){
				uni.showToast({
					title:'暂未加入此功能',
					icon:'none'
				})
			},
			toForward(){
				uni.showToast({
					title:'暂未加入此功能',
					icon:'none'
				})
			}
		},
		computed:{
			showRecommendList(){
				if(this.current!==0&&this.current!==4){
					let result=this.recommendList[this.current-1]
					return result
				}else if(this.current===0){
					return this.recommendList[0]
				}else{
					let result=this.recommendList.find(a=>a.date===this.chooseTime)
					if(result){
						return result
					}else{
						uni.showToast({
							title:'无当天的数据',
							icon:'none'
						})
						this.chooseTime=this.recommendList[0].date
						this.current=0
						return this.recommendList[0]
					}
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop=e.scrollTop
		},
		onPullDownRefresh(){
			console.log('下拉刷新')
		}
	}
</script>

<style scoped>
	.page{
		width: 100vw;
		height: auto;
		padding-top:2rpx ;
		overflow: hidden;
	}
	.course-title,
	.class-title,
	.material-title{
		padding: 20rpx;
	}
	.course-swiper,
	.class-swiper{
		padding: 20rpx 0;
	}
	.course-scroll,
	.class-scroll{
		justify-content: start;
		width: 100%;
		height: auto;
		overflow: auto;
	}
	.course-item-wrap,
	.class-item-wrap{
		display: inline-block;
		width: 60vw;
		height: auto;
		margin-right: 20rpx;
	}
	.course-item-wrap:nth-child(1),
	.class-item-wrap:nth-child(1){
		margin-left: 20rpx;
	}
	.course-item-img,
	.class-item-img{
		width: 60vw;
		height: auto;
		border-radius:2vw;
	}
	.class-item-wrap,
	.class-item-img{
		width: 40vw;
	}
	.recommend-item-title{
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	.recommend-item-title-content{
		flex: 1;
		font-size: 30rpx;
		font-weight: bold;
		justify-content: space-between;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.recommend-item-create_time{
		display: inline-block;
		margin-left: 10rpx;
	}
	.recommend-item-text{
		white-space: pre;
		line-height: 42rpx;
	}
	.recommend-item-img{
		width: 80%;
		height: auto;
		border-radius: 2vw;
		margin-left: 50%;
		transform: translateX(-50%);
		border: 1px solid #ebebeb;
		box-shadow: 0 10rpx 30rpx -10rpx rgba(0,0,0,.5);
	}
	.recommend-item-btn{
		width: 100vw;
		padding: 0;
		line-height: 48rpx;
	}
	.recommend-item-btn-save,
	.recommend-item-btn-forward{
		border: 1px solid #d7d7d7;
		padding: 10rpx 0;
	}
</style>
